<template>
    <div class="arrange">
      <div class="eda-main-title">
        <div class="top-icon">
          <img src="../../../assets/img/personnelImage/创建流程图.png"/>
        </div>
        <div class="top-title">
          流程:创建 - 面试安排流程 - 创建
        </div>
        <div class="top-operate">
          <el-button type="primary" :icon="Remove" size="small" @click="cancel">取消</el-button>
          <el-button type="primary" :icon="Check" size="small" @click="save">保存</el-button>
        </div>
      </div>
      <div class="eda-main">
        <div class="main-middle">
          <div class="table-container">
            <table class="table-layout">
              <tr class="module-item">
                <td colspan="4">| 面试通知信息</td>
              </tr>
              <tr>
                <td class="item">面试负责人</td>
                <td style="display: flex">
                  <el-button :icon="Search" @click="selectHR"/>
                  <el-input v-model="hr.empName" disabled/>
                </td>
                <td class="item">面试岗位</td>
                <td>
                  <el-select v-model="interviewArrange.position" placeholder="请选择面试岗位" clearable filterable>
                    <el-option v-for="(item) in positionOptions" :value="item.label" :label="item.label"/>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td class="item">面试日期</td>
                <td>
                  <el-date-picker v-model="interviewArrange.interviewDate"
                                  :disabled-date="publishDateAfter"
                                  type="date" placeholder="请选择面试日期"/>
                </td>
                <td class="item">面试时间</td>
                <td>
                  <el-time-select
                      v-model="interviewArrange.interviewTime"
                      start="08:30"
                      step="00:15"
                      end="18:30"
                      :disabled-date="publishDateAfter"
                      placeholder="选择面试时间"
                      style="width: 220px"
                  />
                </td>
              </tr>
              <tr>
                <td class="item">面试形式</td>
                <td>
                  <el-select v-model="interviewArrange.form" placeholder="请选择面试形式" clearable>
                    <el-option v-for="(item) in interviewFormOptions" :label="item.label" :value="item.value"/>
                  </el-select>
                </td>
                <td class="item">面试阶段</td>
                <td>
                  <el-select v-model="interviewArrange.phase" placeholder="请选择面试阶段" clearable>
                    <el-option v-for="(item) in interviewPhaseOptions" :label="item.label" :value="item.value"/>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td class="item">说明</td>
                <td colspan="3">
                  <el-input type="textarea" :rows="4" v-model="interviewArrange.remark"/>
                </td>
              </tr>
              <tr class="module-item">
                <td colspan="4">| 候选人信息</td>
              </tr>
              <tr>
                <td class="item">候选人简历</td>
                <td colspan="3">
                  <el-button :icon="Search" @click="selectResume"/>
                </td>
              </tr>
              <tr>
                <td class="item">候选人姓名</td>
                <td>
                  <el-input v-model="resume.name" disabled/>
                </td>
                <td class="item">出生年月</td>
                <td>
                  <el-date-picker v-model="resume.birth" type="date" placeholder="出生年月" disabled/>
                </td>
              </tr>
              <tr>
                <td class="item">性别</td>
                <td>
                  <el-radio-group v-model="resume.sex" disabled>
                    <el-radio v-for="(item) in sexOptions" :label="item.label">{{item.label}}</el-radio>
                  </el-radio-group>
                </td>
                <td class="item">
                  最高学历
                </td>
                <td>
                  <el-select v-model="resume.highestEducation" placeholder="请选择学历" disabled>
                    <el-option v-for="(item) in educationOptions" :label="item.label" :value="item.value"/>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td class="item">手机号码</td>
                <td>
                  <el-input v-model="resume.contactPhone" disabled/>
                </td>
                <td class="item">邮箱</td>
                <td>
                  <el-input v-model="resume.email" disabled/>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <emp-window width="48%" @select-row="selectEmp" @clear-select="clearSelectEmp" ref="empWindow"/>
    <resume-window width="48%" @select-row="selectRow" @clear-select="clearSelect" ref="resumeWindow"/>
</template>

<script>
import {Check,Remove,Search} from '@element-plus/icons-vue'
import {getPositionOptions} from "../../../network/sys/position";
import ResumeWindow from "../resume/comps/ResumeWindow.vue";
import EmpWindow from "../emp/comps/EmpWindow.vue";
import {addInterviewArrange} from "../../../network/per/interview_arrange";

export default {
    name: "InterviewArrange",
    components: {EmpWindow, ResumeWindow},
    setup(){
        return{
            Check,
            Remove,
            Search
        }
    },
    data(){
        return{
            value: new Date(),
            interviewArrange:{
                resumeId:null,
                hr: null,
                position: null,
                interviewDate: null,
                interviewTime: null,
                form: 3,
                phase: 1,
                remark:null,
                resumeClassifyId: null
            },
            resume: {
                id: null,
                name: null,
                sex: '男',
                birth: null,
                highestEducation: null,
                contactPhone: null,
                email: null
            },
            sexOptions:[],
            interviewFormOptions:[],
            interviewPhaseOptions: [],
            positionOptions: [],
            educationOptions: [],
            hr:{
                id: null,
                empName: null,
                positionId: null
            }
        }
    },
    methods:{
        publishDateAfter(time){
          return time.getTime() < Date.now();
        },
        selectEmp(row){
            // this.interviewArrange.position = row.positionId;
            this.interviewArrange.hr = row.id;
            this.hr = row;
        },
        clearSelectEmp(){
            this.interviewArrange.position = null;
            Object.assign(this.hr,this.$options.data.call(this).hr);
        },
        selectHR(){
            this.$refs.empWindow.visible = true;
        },
        clearSelect(){
            Object.assign(this.resume,this.$options.data.call(this).resume)
        },
        selectRow(row){
          console.log('row.id',row.id)
            this.interviewArrange.resumeClassifyId = row.id;
            this.resume = row;
        },
        selectResume(){
            this.$refs.resumeWindow.visible = true;
        },
        cancel(){
            this.$router.go(-1);
        },
        save() {
            addInterviewArrange(this.interviewArrange).then(data=>{
                this.$response.handle({
                    data: data,
                    success: '添加成功',
                    error: '添加失败',
                    successFn:()=>{
                        this.$router.go(-1);
                    }
                })
            })
        },
        loadDictOptions(){
            this.interviewFormOptions = this.$dictMap.get('interview_form');
            this.interviewPhaseOptions = this.$dictMap.get('interview_phase');
            this.sexOptions = this.$dictMap.get('sex');
            this.educationOptions = this.$dictMap.get('education');
        },
        loadPositionOptions(){
            getPositionOptions().then(data=>{
                console.log('岗位选项数据：',data)
                if(data.code === 200){
                    this.positionOptions = data.data;

                }
            })
        },
        init(){
            this.loadDictOptions();
            this.loadPositionOptions();
        }
    },
    created() {
        this.init();
    }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/EDemandApp";
</style>
<style scoped>
.el-select-dropdown__wrap {
  max-height: 274px;
  max-width: 80px;
}
*{
    /*padding: 0;*/
    /*margin: 0 auto;*/
    /*border: 1px solid red;*/
}
.arrange{
    width: 100%;
    text-align: center;
    overflow: hidden;
}


td{
    text-align: left;
    font-size: 14px;
    border: 1px solid rgb(217,217,217);
}
tr{
    height: 40px;
}
.module-item td{
    font-size: 16px;
    font-weight: 600;
    text-indent: 10px;
}
.item{
  text-align:center;
  background: rgb(243,243,243);
    text-indent: 10px;
}
table{
    border-spacing: 0;
    border-collapse: inherit;
    border: 2px solid rgb(217,217,217);
}
</style>
